<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test 0</title>
  <style>
    body {
      margin: 0;
      /*overflow: hidden;*/
      background: black;
    }
    canvas {
      display: block;
      background: #8c6621;
      position: absolute;
      top: 520px;
      left: 912px;
      /*width: 800px;*/
      /*height: 600px;*/
    }

    .b0 {
      display: flex;
    }
    .b1 {
      /*width: 300px;*/
      flex: 0 0 300px;
      background: aquamarine;
    }
    .b2 {
      flex: 1 1 auto;
      background: aqua;
    }

    #wrap{
      padding-left: 200px;
    }
    .leftpart{
      float:left;
      width:200px;
      margin-left:-200px;
      height: 200px;
      background-color:lightgreen;
    }
    .rightpart{
      float: right;
      width: 100%;
      height: 200px;
      background-color: lightseagreen;
    }
  </style>
</head>
<body>
<div class="b0">
  <div class="b1">1</div>
  <div class="b2">2</div>
</div>
<div id="wrap">
  <div class="rightpart">宽度自适应部分</div>
  <div class="leftpart">width200的左边栏</div>
</div>
<canvas id="mycanvas"></canvas>
<!--<script src="../lib/pixi.js"></script>-->
<script type="text/javascript">
  const canvas = document.getElementById('mycanvas')
  canvas.width = 800
  canvas.height = 600
  const ctx = canvas.getContext('2d')
  // ctx.beginPath()
  // ctx.arc(111, 111, 33, 0, Math.PI * 2);
  // ctx.fillStyle = '#fff'
  // ctx.fill()
  document.addEventListener('pointerdown', (event) => {
    const bound = event.target.getBoundingClientRect();
    const x = event.clientX - bound.x
    const y = event.clientY - bound.y
    console.log(x, ', ', y)
    ctx.clearRect(0, 0, 800, 600)
    ctx.beginPath()
    ctx.arc(x, y, 3, 0, Math.PI * 2);
    ctx.fillStyle = '#fff'
    ctx.fill()
  })
</script>
</body>
</html>
